import React, { Component } from 'react';
import { StyleSheet, TouchableOpacity, Clipboard, TextInput } from 'react-native';
import { Container, Content, View, Toast, Text, Icon } from 'native-base';
import { connect } from 'react-redux';
import { Image, Avatar } from 'react-native-elements';
import LinearGradient from 'react-native-linear-gradient';
import ImagePicker from 'react-native-image-crop-picker';
import {CODE, ZONE, upload} from '@react-native-hero/qiniu';


import { Header, Loading } from '../../component';
import { Colors, Metrics } from '../../theme';
import Http from '../../utils/HttpPost';
import ParamsValidate from '../../utils/ValueValidate';



class ProblemBack extends Component {
	constructor(props) {
		super(props);
		this.state = {
			wentiType: '',
			wentiDescribe: '',
			updataImg1: '',
			updataImg2: '',
			updataImg3: '',
			isLoading: false,
		}
	}


	UNSAFE_componentWillMount() {

	}

	componentDidMount() {
		
	}

	//  上传
	uploadImgFunc(index){
		ImagePicker.openPicker({
			cropperToolbarTitle: '选取图片',
			mediaType: 'photo'
		}).then((res) => {
			console.log('res', res)
			let path = res.path.replace('file://', '');
			this.setState({isLoading: true})
			upload(
				{
				  key: 'shichai/'+this.props.token+'/'+res.modificationDate,
				  // 上传文件的本地路径
				  path: path,
				  // 上传文件的 mime type
				  mimeType: res.mime,
				  // 上传凭证，通常由服务器生成传给客户端
				  token: this.props.global.qiniuToken,
				  // 机房，传入 ZONE 的枚举值
				  zone: ZONE.HUADONG,
				}
			  )
			  .then(data => {
				this.setState({isLoading: false})
				// 上传成功，data 是七牛服务器返回的数据
				console.log('data', data)
				switch (index) {
					case 1:
						this.setState({updataImg1: this.props.global.qiniuBaseUri+data.key})
						break;
					case 2:
						this.setState({updataImg2: this.props.global.qiniuBaseUri+data.key})
						break;
					case 3:
						this.setState({updataImg3: this.props.global.qiniuBaseUri+data.key})
						break;
				
					default:
						break;
				}
			  })
			  .catch(err => {
				this.setState({isLoading: false})
				if (err.code === CODE.UPLOAD_FAILURE) {
				  console.log('upload error',err)
				}
			  })
		}).catch(err => {
			console.log('用户取消');
		})
	}


	// 数据提交
	submitFunc(){
		let { wentiType, wentiDescribe, updataImg1, updataImg2, updataImg3 } = this.state;

		let wentiDescribeMsg = ParamsValidate('isEmpty', wentiDescribe);
		if (wentiDescribeMsg !== null) {
			Toast.show({
				text: wentiDescribeMsg,
				position: "top",
				textStyle: { textAlign: "center" },
				type: "warning"
			})
			return;
		}

		this.setState({isLoading: true})
		Http('post',"/user/problemBack", {  
			problemTitle: wentiType, 
			problemDescribe: wentiDescribe, 
			descImg1: updataImg1,
			descImg2: updataImg2,
			descImg3: updataImg3
		}).then(res => {
			this.setState({isLoading: false})
			if (res.code === 200) {
				Toast.show({ text: "问题提交成功！", textStyle: { textAlign: "center" }, type: "success" });
				this.props.navigation.goBack(); 
			}
		})
	}

	render() {
		return (
			<Container>
				<Header title="问题反馈" onLeftPress={() => this.props.navigation.goBack()} rightText="提交" onRightPress={() => this.submitFunc()} />
				<Loading showLoading={this.state.isLoading} />
				<Content>
					<View style={Styles.contents}>
						<Text style={Styles.titles}>
							问题类型
							<Text style={Styles.bitian}> (必填) </Text>
						</Text>
						<TextInput
							style={Styles.inputText}
							placeholder='流量达人相关问题'
							value={this.state.wentiType}
							onChangeText={(value) => this.setState({ wentiType: value })}
						/>

						<Text style={Styles.titles}>
							详情描述
							<Text style={Styles.bitian}> (必填) </Text>
						</Text>
						<TextInput
							style={Styles.multilineText}
							placeholder="请输入问题描述"
							multiline={true}
							onChangeText={(value) => this.setState({ wentiDescribe: value })}
						/>

						<Text style={Styles.titles}>
							上传截图
							<Text style={Styles.xuantian}> (选填) </Text>
						</Text>

						<View style={Styles.jietuGroup}>
							{
								this.state.updataImg1?
								<Image  style={Styles.jietuImg} source={{ uri: this.state.updataImg1 }} />
								:
								<TouchableOpacity onPress={() => this.uploadImgFunc(1)} >
									<Image  style={Styles.jietuImg} source={require('../../asserts/images/component/tianjia_img.jpg' )} />
								</TouchableOpacity>
							}

							{
								this.state.updataImg2?
								<Image  style={Styles.jietuImg} source={{ uri: this.state.updataImg2 }} />
								:
								<TouchableOpacity onPress={() => this.uploadImgFunc(2)} >
									<Image  style={Styles.jietuImg} source={require('../../asserts/images/component/tianjia_img.jpg' )} />
								</TouchableOpacity>
							}

							{
								this.state.updataImg3?
								<Image  style={Styles.jietuImg} source={{ uri: this.state.updataImg3 }} />
								:
								<TouchableOpacity onPress={() => this.uploadImgFunc(3)} >
									<Image  style={Styles.jietuImg} source={require('../../asserts/images/component/tianjia_img.jpg' )} />
								</TouchableOpacity>
							}
							
						</View>
						
					</View>
				</Content>
			</Container>
		);
	}

}

const mapStateToProps = state => ({
	logged: state.user.logged,
	token: state.user.token,
	global: state.global,
});

const mapDispatchToProps = dispatch => ({
	setGlobalInfo: globalInfo => dispatch({ type: 'SET_GLOBALINFO', payload: { globalInfo } }),
});

export default connect(mapStateToProps, mapDispatchToProps)(ProblemBack);

const Styles = StyleSheet.create({
	contents: { flex: 1, padding: 20, backgroundColor: Colors.huiF0, },
	signInView: { marginTop: 28, marginBottom: 28, alignItems: "center" },
	loginBtn: { width: Metrics.screenWidth * 0.6, alignItems: "center", borderRadius: 8 },
	inputText: { fontSize: 14, marginTop: 18, padding: 6, textAlign:'center', backgroundColor: Colors.bai},
	multilineText: { fontSize: 14, height: 160, marginTop: 18, padding: 6, textAlign:'center', backgroundColor: Colors.bai},
	titles: { fontSize: 14, marginTop: 18 },
	bitian: { fontSize: 12, color: Colors.hong, },
	xuantian: { fontSize: 12, color: Colors.hui99, },
	jietuGroup:{ marginTop: 18, flexDirection: "row",
	justifyContent: "space-between",
	alignItems: "center",},
	jietuImg: { width: Metrics.screenWidth/4, height: Metrics.screenWidth/4 }
});